上一篇 製作 Reveal component 主要是利用了 framer-motion API 中的 motoin 與 scroll。
接著本篇透過 variants 來做出 Reveal component 進一步的變化，效果如下

variants

官方文件
將動態以物件的形式把參數設定在 animate 是相當的方便尤其在狀況單純的單一元件。當我們想創作動態效果是環繞整個 DOM 中的元件，更適合以聲明的方式編排動畫，這時候我們可以使用 variants 來達成。

variants 預先設定好動畫的目標狀態

const variants = {
  visible: { opacity: 1 },
  hidden: { opacity: 0 },
}

通過 variants 傳入 motion 元件

<MotionImage
  variants={variants}
/

Dynamic variants

每個 variant 可以用函式定義，並可接受一個參數，這個參數可以透過custom props 傳遞

  const variants = {
    visible: i => ({
      opacity: 1,
      y: '0',
      transition: {
        delay: i* 0.2, // delay 的時間為 i* 0.2
        duration: 0.5,
        type: 'tween',
      },
    }),
    hidden: { opacity: 0, y: '25%' },
  };
  
  <MotionImage
    custom={1} //帶入 1
    animate="visible"
    variants={variants}
    whileInView="visible"
    viewport={{ once: false, amount: 0.5 }}
  />

搭配陣列 map 方法

可以先寫好圖片的陣列 cosnt imageList=[image01,image02 ......]
再利用 map 一口氣 render 圖片組 componet，帶入圖片路徑，同時 map 第二個參數 index 索引直作為 delay 秒數的參考帶入 custom。
如果一來圖片組動畫順序因為 delay 秒數為: 0,0.2,0.4,0.6.... 影響，最終整體效果就會如影片依序由下往上淡入。

  const variants = {
    visible: i => ({
      opacity: 1,
      y: '0',
      transition: {
        delay: i* 0.2, // delay的時間為 i* 0.2
        duration: 0.5,
        type: 'tween',
      },
    }),
    hidden: { opacity: 0, y: '25%' },
  };
  
  
  {imageList.map((item,index)=> (
    <MotionImage
        custom={index} // 利用 index 作為 custom 的參數: 0、1、2...
        animate="visible"
        variants={variants}
        whileInView="visible"
        viewport={{ once: false, amount: 0.5 }}
        key={index}
        src={item} //圖片
   />
  ))}